<template>
  <el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="上级菜单" prop="pid">
        <el-select v-model="ruleForm.pid" placeholder="请选择上级菜单" style="width: 100%">
          <el-option v-for="item in menuList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="菜单名称" prop="title">
        <el-input v-model="ruleForm.title" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <el-popover
          placement="bottom-start"
          v-model:visible="iconVisible"
          width="426"
          trigger="click"
        >
          <div>
            <el-space wrap>
              <span v-for="item in iconArr" :key="item">
                <el-button
                  :icon="item"
                  style="padding: 5px; width: 32px"
                  @click="iconChange(item)"
                ></el-button>
              </span>
            </el-space>
          </div>
          <template #reference>
            <span>
              <el-button style="border-radius: 4px 0 0 4px" :icon="ruleForm.icon"></el-button>
              <el-button
                style="margin: 0; padding: 0 5px; border-radius: 0 4px 4px 0; border-left: 0"
              >
                <el-icon><CaretBottom /></el-icon>
              </el-button>
            </span>
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item label="路由" prop="href">
        <el-input v-model="ruleForm.href" placeholder="请输入路由" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="ruleForm.sort" placeholder="请输入排序" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="saveLoading" @click="handleClose(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { nextTick, reactive, ref } from 'vue'
import { menu, addMenu, editMenu } from '@/api/admin'
import { number } from 'echarts'
const saveLoading = ref(false)
const ruleFormRef = ref<FormInstance>()
const dialogVisible = ref<boolean>(false)
const title = ref('新增菜单')

const rules = reactive({
  pid: [{ required: true, message: '请选择上级菜单', trigger: 'change' }],
  icon: [{ required: true, message: '请选择图标', trigger: 'change' }],
  title: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  href: [{ required: true, message: '请输入路由', trigger: 'blur' }],
})

const ruleForm = reactive({
  id: '',
  pid: '',
  title: '',
  sort: '',
  icon: '',
  href: '',
  status: 1,
})
const iconVisible = ref()
const iconArr = [
  'House',
  'Link',
  'Notification',
  'Connection',
  'ChatDotRound',
  'Setting',
  'Clock',
  'Discount',
  'Odometer',
  'ChatSquare',
  'ChatRound',
  'View',
  'Bell',
  'Lock',
  'PieChart',
  'Message',
  'MessageBox',
  'Operation',
  'UserFilled',
  'Tools',
  'HomeFilled',
  'Histogram',
  'Grid',
  'DataLine',
  'Checked',
  'TrendCharts',
  'List',
  'BellFilled',
  'Platform',
  'GoodsFilled',
]
const menuList = ref()
const emit = defineEmits<{ (event: 'refresh'): void }>()

const iconChange = (item) => {
  ruleForm.icon = item
  iconVisible.value = false
  // ruleFormRef.value.validate()
}

function close() {
  ruleFormRef.value.resetFields()
  Object.keys(ruleForm).forEach((key) => {
    if (key == 'status') ruleForm[key] = 1
    else ruleForm[key] = ''
  })
}

const show = (item = {}) => {
  title.value = '新增菜单'
  if (item.id) {
    title.value = '编辑菜单'
    Object.keys(ruleForm).forEach((key) => {
      ruleForm[key] = item[key]
    })
  }
  dialogVisible.value = true
  getMenuList()
}

const getMenuList = () => {
  menu({}).then((res) => {
    if (res.code == 200) {
      let topMent = { id: 0, title: '顶级菜单' }
      menuList.value = [topMent]
      let list = res.data.data
      list.forEach((item) => {
        if (item.pid == 0) menuList.value.push({ id: item.id, title: item.title })
      })
    }
  })
}

const handleClose = async (done: () => void) => {
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      saveLoading.value = true
      if (ruleForm.id) {
        //编辑
        editMenu(ruleForm).then((res) => {
          if (res.code == 200) {
            ElNotification({
              title: res.data,
              message: res.msg,
              type: 'success',
            })
            emit('refresh')
            dialogVisible.value = false
          }
          saveLoading.value = false
        })
      } else {
        //新增
        addMenu(ruleForm).then((res) => {
          if (res.code == 200) {
            ElNotification({
              title: res.data,
              message: res.msg,
              type: 'success',
            })
            emit('refresh')
            dialogVisible.value = false
          }
          saveLoading.value = false
        })
      }
    }
  })
}

defineExpose({
  show,
})
</script>
<style lang="scss" scoped>
</style>

